/* eslint-disable react-hooks/exhaustive-deps */
import React, {
  JSX,
  useCallback,
  createContext,
  useState,
  useContext,
  useRef,
  useEffect,
} from 'react';
import {PlayerSvga} from '../../kit/hoc';
import {PlayerSvgaRef} from '../../kit/hoc/PlaySvga';
import {StyleSheet, View} from 'react-native';
import {StatusBarHeight} from '../../config/devices';
import SearchInput from './components/SearchInput';
import {Item, source} from '../HistoryScreen/data';
import RecentViewing from './components/RecentViewing';
import {HorizontalTabs} from '../../kit/tabs';
import {TabItem} from '../../kit/tabs';
import EpisodesList from './components/EpisodesList';
import ErrorBoundary from '../../kit/com/ErrorBoundary';
import { VideoListSkeleton } from '../../kit/skeleton';
import { useAppContext,Value } from '../../context/AppContext';

type State = {
  recentViewings: Item[];
  tabs: TabItem[];
};

type HomeScreenContextValue = {
  state: State;
  set: (state: State) => void;
};

const HomeScreenContext = createContext<HomeScreenContextValue | undefined>(
  undefined,
);


const initialiState: State = {
  recentViewings: [source[0], source[1]],
  tabs: [
    {label: '推荐', value: 1},
    {label: '最新', value: 2},
    {label: '重生', value: 3},
    {label: '玄幻', value: 4},
    {label: '热血', value: 5},
    {label: '总裁', value: 6},
    {label: '反转', value: 7},
  ],
};

function HomeScreen(): JSX.Element {
  const [state, setState] = useState<State>(initialiState);
  const playerSvgaInstance = useRef<PlayerSvgaRef>(null);
  const appCtx = useAppContext() as Value;


  useEffect(() => {
    appCtx.setStatusBarStyles('dark-content');
  },[]);

  const handleSearch = useCallback((value: string) => {
    console.log('开始搜索');
    console.log(value);
  }, []);

  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  const press = useCallback(() => {
    playerSvgaInstance.current?.start(
      'https://yuke-social.oss-ap-southeast-5.aliyuncs.com/dev/10000/1/20241119/202411191057236789.svga?time=1731985064?time=1732007115?time=1732154068',
    );
  }, []);

  return (

    <HomeScreenContext.Provider value={{state, set: setState}}>
      <View style={styles.container}>
        <SearchInput onSearch={handleSearch} />
        <RecentViewing />
        <PlayerSvga ref={playerSvgaInstance} />
        <HorizontalTabs tabs={state.tabs} />
        <EpisodesList list={source} />
      </View>
    </HomeScreenContext.Provider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    paddingTop: StatusBarHeight,
  },
});

export const useHomeScreenContext = () => {
  const ctx = useContext(HomeScreenContext);
  return ctx;
};

export default  function () {
  return (
    <ErrorBoundary skeleton={<VideoListSkeleton/>} >
      <HomeScreen/>
    </ErrorBoundary>
  );
}
